<template>
	<el-dialog :title="titleMap[mode]" v-model="visible" customClass="customWidth" destroy-on-close @closed="$emit('closed')">
		<el-form :model="form" :rules="rules" :disabled="mode=='show'" ref="dialogForm" label-width="100px" label-position="left">
			<el-row :gutter="24">
				<el-col :lg="12">
					<el-form-item label="排序号" prop="sortNo">
						<el-input-number v-model="form.sortNo" placeholder="排序号" clearable></el-input-number>
					</el-form-item>
					<el-form-item label="姓名" prop="userName">
						<el-input v-model="form.userName" placeholder="姓名" clearable maxlength="20"></el-input>
					</el-form-item>
					<el-form-item label="关联用户" prop="accountId">
						<select-user-dialog v-model:accountId="form.accountId" :mode="false"/>
					</el-form-item>
					<el-form-item label="部门" prop="deptId">
						<el-cascader v-model="form.deptId" :options="groups" :props="groupsProps" :show-all-levels="false" clearable style="width: 100%;"></el-cascader>
					</el-form-item>
					<el-form-item label="职务" prop="userLevel">
						<sc-select v-model="form.userLevel" :params="{code:'userLevel'}" :apiObj="$API.hr.hrDic.getHrDicByCode" clearable filterable style="width: 100%"></sc-select>
					</el-form-item>
					<el-form-item label="英文名" prop="userNameEn">
						<el-input v-model="form.userNameEn" placeholder="英文名" clearable maxlength="40"></el-input>
					</el-form-item>
				</el-col>
				<el-col :lg="12">
					<div style="width: 100%;text-align: center;">
						<sc-upload style="width: 200px;height: 300px;display: inline-block;"
								   v-model="form.avatar"
								   :apiObj="$API.file.uploadHrPhoto"
								   title="上传工作照片"
						></sc-upload>
					</div>
				</el-col>
			</el-row>
			<el-row :gutter="24">
				<el-col :lg="12">
					<el-form-item label="曾用名" prop="beforeUserName">
						<el-input v-model="form.beforeUserName" placeholder="曾用名" clearable maxlength="40"></el-input>
					</el-form-item>
				</el-col>
				<el-col :lg="12">
					<el-form-item label="性别" prop="sex">
						<el-select v-model="form.sex" placeholder="请选择" style="width: 200px">
							<el-option label="男" value="1"></el-option>
							<el-option label="女" value="2"></el-option>
							<el-option label="保密" value="0"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="24">
				<el-col :lg="12">
					<el-form-item label="工号" prop="workNo">
						<el-input v-model="form.workNo" placeholder="工号" clearable maxlength="40"></el-input>
					</el-form-item>
				</el-col>
				<el-col :lg="12">
					<el-form-item label="编号" prop="staffNo">
						<el-input v-model="form.staffNo" placeholder="编号" clearable maxlength="40"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="24">
				<el-col :lg="12">
					<el-form-item label="身份证号" prop="staffCardNo">
						<el-input v-model="form.staffCardNo" placeholder="身份证号" clearable maxlength="40"></el-input>
					</el-form-item>
				</el-col>
				<el-col :lg="12">
					<el-form-item label="出生日期" prop="birthDay">
						<el-date-picker v-model="form.birthDay" placeholder="出生日期" type="date" value-format="YYYY-MM-DD" style="width: 100%;"></el-date-picker>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="24">
				<el-col :lg="12">
					<el-form-item label="年休假" prop="annualLeave">
						<el-input-number v-model="form.annualLeave" placeholder="年休假" clearable></el-input-number>/天
					</el-form-item>
				</el-col>
				<el-col :lg="12">
					<el-form-item label="生肖" prop="animal">
						<sc-select v-model="form.animal" :params="{code:'animalType'}" :apiObj="$API.hr.hrDic.getHrDicByCode" clearable filterable style="width: 100%"></sc-select>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="24">
				<el-col :lg="12">
					<el-form-item label="籍贯" prop="nativePlace">
						<sc-select v-model="form.nativePlace" :params="{code:'nativePlace'}" :apiObj="$API.hr.hrDic.getHrDicByCode" clearable filterable style="width: 100%"></sc-select>
					</el-form-item>
				</el-col>
				<el-col :lg="12">
					<el-form-item label="现住地址" prop="address">
						<el-input v-model="form.address" placeholder="现住地址" clearable maxlength="40"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="24">
				<el-col :lg="12">
					<el-form-item label="血型" prop="bloodType">
						<sc-select v-model="form.bloodType" :params="{code:'bloodType'}" :apiObj="$API.hr.hrDic.getHrDicByCode" clearable filterable style="width: 100%"></sc-select>
					</el-form-item>
				</el-col>
				<el-col :lg="12">
					<el-form-item label="民族" prop="nationalty">
						<el-input v-model="form.nationalty" placeholder="民族" clearable maxlength="20"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="24">
				<el-col :lg="12">
					<el-form-item label="婚姻状况" prop="maritalStatus">
						<sc-select v-model="form.maritalStatus" :params="{code:'maritalStatus'}" :apiObj="$API.hr.hrDic.getHrDicByCode" clearable filterable style="width: 100%"></sc-select>
					</el-form-item>
				</el-col>
				<el-col :lg="12">
					<el-form-item label="健康状况" prop="health">
						<sc-select v-model="form.health" :params="{code:'healthType'}" :apiObj="$API.hr.hrDic.getHrDicByCode" clearable filterable style="width: 100%"></sc-select>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="24">
				<el-col :lg="12">
					<el-form-item label="政治面貌" prop="politicalStatus">
						<sc-select v-model="form.politicalStatus" :params="{code:'politicalStatus'}" :apiObj="$API.hr.hrDic.getHrDicByCode" clearable filterable style="width: 100%"></sc-select>
					</el-form-item>
				</el-col>
				<el-col :lg="12">
					<el-form-item label="入党时间" prop="joinPartyTime">
						<el-date-picker v-model="form.joinPartyTime" placeholder="入党时间" type="date" value-format="YYYY-MM-DD" style="width: 100%;"></el-date-picker>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="24">
				<el-col :lg="12">
					<el-form-item label="户口类别" prop="staffType">
						<sc-select v-model="form.staffType" :params="{code:'staffType'}" :apiObj="$API.hr.hrDic.getHrDicByCode" clearable filterable style="width: 100%"></sc-select>
					</el-form-item>
				</el-col>
				<el-col :lg="12">
					<el-form-item label="户口所在地" prop="staffAddress">
						<el-input v-model="form.staffAddress" placeholder="户口所在地" clearable maxlength="40"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="24">
				<el-col :lg="12">
					<el-form-item label="工种" prop="workType">
						<sc-select v-model="form.workType" :params="{code:'workType'}" :apiObj="$API.hr.hrDic.getHrDicByCode" clearable filterable style="width: 100%"></sc-select>
					</el-form-item>
				</el-col>
				<el-col :lg="12">
					<el-form-item label="工资级别" prop="wagesLevel">
						<sc-select v-model="form.wagesLevel" :params="{code:'wagesLevel'}" :apiObj="$API.hr.hrDic.getHrDicByCode" clearable filterable style="width: 100%"></sc-select>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="24">
				<el-col :lg="12">
					<el-form-item label="员工类型" prop="occupation">
						<sc-select v-model="form.occupation" :params="{code:'occupation'}" :apiObj="$API.hr.hrDic.getHrDicByCode" clearable filterable style="width: 100%"></sc-select>
					</el-form-item>
				</el-col>
				<el-col :lg="12">
					<el-form-item label="入职时间" prop="employedTime">
						<el-date-picker v-model="form.employedTime" placeholder="入职时间" type="date" value-format="YYYY-MM-DD" style="width: 100%;"></el-date-picker>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="24">
				<el-col :lg="12">
					<el-form-item label="岗位" prop="workJob">
						<sc-select v-model="form.workJob" :params="{code:'workJob'}" :apiObj="$API.hr.hrDic.getHrDicByCode" clearable filterable style="width: 100%"></sc-select>
					</el-form-item>
				</el-col>
				<el-col :lg="12">
					<el-form-item label="在职状态" prop="workStatus">
						<sc-select v-model="form.workStatus" :params="{code:'workStatus'}" :apiObj="$API.hr.hrDic.getHrDicByCode" clearable filterable style="width: 100%"></sc-select>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="24">
				<el-col :lg="12">
					<el-form-item label="联系电话" prop="phone">
						<el-input v-model="form.phone" placeholder="联系电话" clearable maxlength="40"></el-input>
					</el-form-item>
				</el-col>
				<el-col :lg="12">
					<el-form-item label="考勤排班类型" prop="attendType">
						<el-select v-model="form.attendType" filterable style="width: 100%" placeholder="考勤规则">
							<el-option v-for="item in attend" :key="item.configId" :label="item.title" :value="item.configId"/>
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="24">
				<el-col :lg="12">
					<el-form-item label="职称" prop="technicalTitle">
						<sc-select v-model="form.technicalTitle" :params="{code:'technicalTitle'}" :apiObj="$API.hr.hrDic.getHrDicByCode" clearable filterable style="width: 100%"></sc-select>
					</el-form-item>
				</el-col>
				<el-col :lg="12">
					<el-form-item label="职称级别" prop="workLevel">
						<sc-select v-model="form.workLevel" :params="{code:'workLevel'}" :apiObj="$API.hr.hrDic.getHrDicByCode" clearable filterable style="width: 100%"></sc-select>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="24">
				<el-col :lg="12">
					<el-form-item label="手机号码" prop="mobileNo">
						<el-input v-model="form.mobileNo" placeholder="手机号码" clearable maxlength="40"></el-input>
					</el-form-item>
				</el-col>
				<el-col :lg="12">
					<el-form-item label="微信号码" prop="wxNo">
						<el-input v-model="form.wxNo" placeholder="微信号码" clearable maxlength="40"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="24">
				<el-col :lg="12">
					<el-form-item label="电子邮件" prop="email">
						<el-input v-model="form.email" placeholder="电子邮件" clearable maxlength="40"></el-input>
					</el-form-item>
				</el-col>
				<el-col :lg="12">
					<el-form-item label="家庭地址" prop="homeAddress">
						<el-input v-model="form.homeAddress" placeholder="家庭地址" clearable maxlength="40"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="24">
				<el-col :lg="12">
					<el-form-item label="QQ" prop="qq">
						<el-input v-model="form.qq" placeholder="QQ" clearable maxlength="40"></el-input>
					</el-form-item>
				</el-col>
				<el-col :lg="12">
					<el-form-item label="其他联系方式" prop="otherContact">
						<el-input v-model="form.otherContact" placeholder="其他联系方式" clearable maxlength="40"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="24">
				<el-col :lg="12">
					<el-form-item label="开户银行" prop="bank">
						<el-input v-model="form.bank" placeholder="开户银行" clearable maxlength="40"></el-input>
					</el-form-item>
				</el-col>
				<el-col :lg="12">
					<el-form-item label="银行账户" prop="bankAccount">
						<el-input v-model="form.bankAccount" placeholder="银行账户" clearable maxlength="40"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="24">
				<el-col :lg="12">
					<el-form-item label="学历" prop="highsetShool">
						<sc-select v-model="form.highsetShool" :params="{code:'education'}" :apiObj="$API.hr.hrDic.getHrDicByCode" clearable filterable style="width: 100%"></sc-select>
					</el-form-item>
				</el-col>
				<el-col :lg="12">
					<el-form-item label="学位" prop="highsetDegree">
						<sc-select v-model="form.highsetDegree" :params="{code:'highsetDegree'}" :apiObj="$API.hr.hrDic.getHrDicByCode" clearable filterable style="width: 100%"></sc-select>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="24">
				<el-col :lg="12">
					<el-form-item label="毕业时间" prop="graduationTime">
						<el-date-picker v-model="form.graduationTime" placeholder="毕业时间" type="date" value-format="YYYY-MM-DD" style="width: 100%;"></el-date-picker>
					</el-form-item>
				</el-col>
				<el-col :lg="12">
					<el-form-item label="毕业学校" prop="graduationShool">
						<el-input v-model="form.graduationShool" placeholder="毕业学校" clearable maxlength="40"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="24">
				<el-col :lg="12">
					<el-form-item label="专业" prop="major">
						<el-input v-model="form.major" placeholder="专业" clearable maxlength="40"></el-input>
					</el-form-item>
				</el-col>
				<el-col :lg="12">
					<el-form-item label="特长" prop="skills">
						<el-input v-model="form.skills" placeholder="特长" clearable maxlength="40"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="24">
				<el-col :lg="12">
					<el-form-item label="外语语种" prop="otherLanguage">
						<el-input v-model="form.otherLanguage" placeholder="外语语种" clearable maxlength="40"></el-input>
					</el-form-item>
				</el-col>
				<el-col :lg="12">
					<el-form-item label="外语水平" prop="otherLanguageLevel">
						<el-input v-model="form.otherLanguageLevel" placeholder="外语水平" clearable maxlength="40"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="24">
				<el-col :lg="12">
					<el-form-item label="职务情况" prop="cretificate">
						<el-input v-model="form.cretificate" placeholder="职务情况" clearable maxlength="380" type="textarea"></el-input>
					</el-form-item>
				</el-col>
				<el-col :lg="12">
					<el-form-item label="担保记录" prop="surety">
						<el-input v-model="form.surety" placeholder="担保记录" clearable maxlength="380" type="textarea"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="24">
				<el-col :lg="12">
					<el-form-item label="社保缴纳情况" prop="insure">
						<el-input v-model="form.insure" placeholder="社保缴纳情况" clearable maxlength="380" type="textarea"></el-input>
					</el-form-item>
				</el-col>
				<el-col :lg="12">
					<el-form-item label="体检记录" prop="bodyExamim">
						<el-input v-model="form.bodyExamim" placeholder="体检记录" clearable maxlength="380" type="textarea"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-form-item label="备注说明">
				<el-input v-model="form.remark" placeholder="备注说明" clearable maxlength="380" type="textarea"></el-input>
			</el-form-item>
			<el-form-item label="相关附件" prop="attachId">
				<sc-upload-file :apiObj="apiObj" v-model="fileList" :data="{module:'hr'}" :showFileList="false" @success="addNewFile">
					<el-button type="primary" icon="el-icon-upload">上传附件</el-button>
				</sc-upload-file>
				<attach-menu v-model:attachIds="form.attachId" :roleFlag="4" :preview="true"></attach-menu>
			</el-form-item>
		</el-form>
		<template #footer>
			<el-button @click="visible=false">取 消</el-button>
			<el-button v-if="mode!='show'" type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
		</template>
	</el-dialog>
</template>
<script>
import selectUserDialog from "@/views/module/selectUserDialog";
import AttachMenu from "@/views/module/attachMenu";

export default {
	emits: ['success', 'closed'],
	components: {
		selectUserDialog,
		AttachMenu
	},
	data() {
		return {
			visible: false,
			isSaveing: false,
			isShowMsg: false,
			mode: "add",
			btName: "保存",
			titleMap: {
				add: '录入人事档案',
				edit: '编辑人事档案',
				show: '查看'
			},
			//所需数据选项
			groups: [],
			groupsProps: {
				label: "deptName",
				value: "deptId",
				emitPath: false,
				checkStrictly: true
			},
			fileList: [],
			apiObj: this.$API.file.attach.uploadFile,
			attend:[],
			form: {
				userId: '',
				sortNo: '',
				userName: '',
				accountId: '',
				deptId: '',
				userLevel: '',
				userNameEn: '',
				avatar: '',
				attendType:'',
				beforeUserName: '',
				sex: '1',
				workNo: '',
				staffNo: '',
				staffCardNo: '',
				birthDay: '',
				annualLeave: '',
				animal: '1',
				nativePlace: '1',
				address: '',
				bloodType: 'O',
				nationalty: '',
				maritalStatus: '1',
				health: '1',
				politicalStatus: '',
				joinPartyTime: '',
				staffType: '',
				staffAddress: '',
				workType: '',
				wagesLevel: '',
				occupation: '',
				employedTime: '',
				workJob: '1',
				workStatus: '1',
				phone: '',
				technicalTitle: '1',
				workLevel: '1',
				mobileNo: '',
				wxNo: '',
				email: '',
				homeAddress: '',
				qq: '',
				otherContact: '',
				bank: '',
				bankAccount: '',
				highsetShool: '1',
				highsetDegree: '1',
				graduationTime: '',
				graduationShool: '',
				major: '',
				skills: '',
				otherLanguage: '',
				otherLanguageLevel: '',
				cretificate: '',
				surety: '',
				insure: '',
				bodyExamim: '',
				remark: '',
				attachId: ''
			},
			rules: {
				userName: [
					{required: true, message: '人员姓名不能为空', trigger: 'blur'}
				]
			}
		}
	},
	mounted() {
		this.getGroup();
		this.getAttendConfig();
	},
	methods: {
		async getAttendConfig(){
			var res = await this.$API.system.attendConfig.getAllAttendConfigList.get();
			this.attend = res.data;
		},
		async getGroup() {
			var res = await this.$API.hr.hrDepartment.getHrDepartmentTree.get();
			this.groups = res.data;
		},
		//显示
		open(mode = 'add') {
			this.mode = mode;
			this.visible = true;
			return this
		},
		submit() {
			//加载树数据
			this.$refs.dialogForm.validate(async (valid) => {
				if (valid) {
					this.isSaveing = true;
					var res;
					if (this.mode == "add") {
						res = await this.$API.hr.hrUser.insertHrUser.post(this.form);
					} else if (this.mode == "edit") {
						res = await this.$API.hr.hrUser.updateHrUser.post(this.form);
					}
					this.isSaveing = false;
					if (res.code == 200) {
						this.$emit('success')
						this.visible = false;
						this.$message.success("操作成功")
					} else {
						this.$alert(res.message, "提示", {type: 'error'})
					}
				}
			})
		},
		setData(data) {
			this.form.vehicleId = data.vehicleId
			this.form.userId = data.userId
			this.form.sortNo = data.sortNo
			this.form.userName = data.userName
			this.form.accountId = data.accountId
			this.form.deptId = data.deptId
			this.form.userLevel = data.userLevel
			this.form.userNameEn = data.userNameEn
			this.form.avatar = data.avatar
			this.form.beforeUserName = data.beforeUserName
			this.form.sex = data.sex
			this.form.workNo = data.workNo
			this.form.staffNo = data.staffNo
			this.form.staffCardNo = data.staffCardNo
			this.form.birthDay = data.birthDay
			this.form.annualLeave = data.annualLeave
			this.form.attendType  = data.attendType
			this.form.animal = data.animal
			this.form.nativePlace = data.nativePlace
			this.form.address = data.address
			this.form.bloodType = data.bloodType
			this.form.nationalty = data.nationalty
			this.form.maritalStatus = data.maritalStatus
			this.form.health = data.health
			this.form.politicalStatus = data.politicalStatus
			this.form.joinPartyTime = data.joinPartyTime
			this.form.staffType = data.staffType
			this.form.staffAddress = data.staffAddress
			this.form.workType = data.workType
			this.form.wagesLevel = data.wagesLevel
			this.form.occupation = data.occupation
			this.form.employedTime = data.employedTime
			this.form.workJob = data.workJob
			this.form.workStatus = data.workStatus
			this.form.phone = data.phone
			this.form.technicalTitle = data.technicalTitle
			this.form.workLevel = data.workLevel
			this.form.mobileNo = data.mobileNo
			this.form.wxNo = data.wxNo
			this.form.email = data.email
			this.form.homeAddress = data.homeAddress
			this.form.qq = data.qq
			this.form.otherContact = data.otherContact
			this.form.bank = data.bank
			this.form.bankAccount = data.bankAccount
			this.form.highsetShool = data.highsetShool
			this.form.highsetDegree = data.highsetDegree
			this.form.graduationTime = data.graduationTime
			this.form.graduationShool = data.graduationShool
			this.form.major = data.major
			this.form.skills = data.skills
			this.form.otherLanguage = data.otherLanguage
			this.form.otherLanguageLevel = data.otherLanguageLevel
			this.form.cretificate = data.cretificate
			this.form.surety = data.surety
			this.form.insure = data.insure
			this.form.bodyExamim = data.bodyExamim
			this.form.remark = data.remark
			this.form.attachId = data.attachId
		},
		addNewFile(res, file)
		{
			let tArr = this.form.attachId.split(",");
			tArr.push(res.data.attachId);
			this.form.attachId = tArr.join(",");
		}
	}
}
</script>

<style>
.customWidth {
	width: 60%;
}
</style>
